<template>
     <n-divider dashed>v-if</n-divider>
     <h1 v-if="awesome">Vue is awesome!</h1>
     <h1 v-else>Oh no 😢</h1>
     <n-button type="primary" @click="awesome = !awesome">切换条件,awesome: {{awesome}}</n-button>
     <n-divider dashed>v-show</n-divider>
     <h1 v-show="awesome">Vue is awesome!</h1>
     <h1 v-show="!awesome">Oh no 😢</h1>
     <n-divider dashed>v-if && v-show</n-divider>
     <pre v-text="`不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display CSS property。
     注意，v-show 不支持 <template> 元素，也不支持 v-else。`"></pre>
</template>
    
<script setup lang='ts'>
import { ref } from "@vue/reactivity";

const awesome = ref(true);
</script>
    
<style>
    
</style>